{extend name="common/pop" /}
{block name="content"}

<form class="layui-form" style="margin-top:15px;width:90%;" id="form">
    <div class="layui-form-item">
        <label for="" class="layui-form-label">aaa</label>
        <div class="layui-input-block j-upload">
            <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm j-upload-dom">
                <input type="file"
                       name="logo[]"
                       id="upload_1"
                       class="j-file"
                       onchange="upload(event,this)"
                       multiple="multiple"
                />
                <input type="text" class="j-upload-input" readonly value=""/>
                <i class="layui-icon layui-icon-upload"></i>选择文件</a>
        </div>
        <div class="j-img-preview">
            <img src="http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                 class="j-img-preview-item" ondblclick="removePreviewImg(this)">
        </div>

        <div class="layui-input-block j-form-tips">，双击可删除</div>
        <script>

            function upload(event, e) {
                var file = event.target.files[0]
                    , preview = document.querySelector('.j-img-preview')
                    , reader = new FileReader();
                if (!file) {
                    layui.layer.msg('请选择文件');
                } else {
                    $(e).next().val($(e).val())

                    reader.addEventListener("load", function () {
                        if (preview.children.length >= 1) {
                            preview.innerHTML = '';
                        }
                        var image = new Image();
                        image.title = file.name;
                        image.src = this.result;
                        image.classList.add('j-img-preview-item');
                        image.ondblclick = function (e) {
                            $(e.currentTarget).parent().prev().find('input[type=text]').val('')
                            $(e.currentTarget).remove();

                        }
                        preview.append(image);
                    }, false);

                    reader.readAsDataURL(file);
                }
            }
        </script>
    </div>
    <div class="layui-form-item">
        <label for="" class="layui-form-label">
            aaa
        </label>
        <div class="layui-input-block">
            <input type="color" name="aaa" id="" class="j-input-color" value="#wwwwww">
        </div>
    </div>

    <div class="layui-form-item">
        <label for="" class="layui-form-label">
            aaa
        </label>
        <div class="layui-input-block">
            <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="create">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
{/block}
{block name="script"}
<script>
    layui.use(['layer', 'jquery', 'form','colorpicker'], function () {
        var form = layui.form,
            layer = layui.layer,
            colorpicker = layui.colorpicker,
            $ = layui.jquery;

        form.render();

        colorpicker.render({
            elem: '#color'
            ,predefine: true
            ,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
        });
        form.on('submit(create)', function (data) {

            var fd = new FormData(document.getElementById("form"));

            $.ajax({
                url:'{:url("create")}',
                type:'post',
                processData: false,//必须
                contentType: false,//必须
                data:fd,
                success:function(r){
                    if (r.code == 1) {
                        layer.msg(r.msg);
                    } else {
                        layer.msg(r.msg);
                    }
                },
                error:function(r){
                    layer.msg(r.msg);
                }
            })
            return false;
        });
    })
</script>
{/block}

